<template>
  <div class="search">
    <f-drawer ref="orderCalcuateDrawer" :title="drawerTitle" width="65%" @submit="handleSubmit"  @visibleChange="visibleChange" >
      <a-tabs @tabClick="tabClick" :defaultActiveKey="current" v-model="current" :animated='false'>
        <a-tab-pane tab="订单核算" key="form1" v-if="drawerVisible&&tag">
              <order-calculate-tab1 ref="form1" v-if="current=='form1'"></order-calculate-tab1>
        </a-tab-pane>
        <a-tab-pane tab="订单修正" key="form2" v-if="drawerVisible&&tag">
          <order-calculate-tab2 ref="form2" v-if="current=='form2'"></order-calculate-tab2>
        </a-tab-pane>

        <a-tab-pane tab="发票信息" key="form3" v-if="drawerVisible&&!tag">
          <order-calculate-tab3 ref="form3" v-if="current=='form3'"></order-calculate-tab3>
        </a-tab-pane>
      </a-tabs>
    </f-drawer>
  </div>
</template>
<script>


  import OrderCalculateTab1 from './order_calculate_tab1'
  import OrderCalculateTab2 from './order_calculate_tab2'
  import OrderCalculateTab3 from './order_calculate_tab3'

  export default {
    name: 'orderCalcuateDrawer',
    props: {},
    data() {
      return {
        refs: this.$refs,
        drawerVisible: false,
        isEdit: false,
        tag:true,
        title: '',
        current: 'form1',
        formData: {},
        forms: [
          'form1'
        ]
      }
    },
    methods: {
      showDrawer(data,tag) {
        this.isEdit = false
        this.tag=tag
        if (data && data.orderId) {
          this.isEdit = true
          this.formData = data
        } else {
          this.formData = {}
        }
        let form='form1';
        if(!tag){
          form='form3'
        }
        this.refs['orderCalcuateDrawer'].show()
        this.tabClick(form)
      },
      handleSubmit(callback) {
        this.refs[this.current].handleSubmit(callback)
      },
      visibleChange(drawerVisible) {
        this.drawerVisible = drawerVisible
      },
      tabClick(name) {
        this.current = name
        if (this.current === 'form1') {
          this.title = '订单核算'
        }
        if (this.current === 'form2') {
          this.title = '订单修正'
        }
        if (this.current === 'form3') {
          this.title = '发票信息'
        }
        this.$nextTick(() => {
          this.refs[this.current].setData(this.formData)
        })
      }
    },
    computed: {
      drawerTitle: function() {
        return this.title
      }
    },
    created() {
    },
    components: { OrderCalculateTab1,OrderCalculateTab2,OrderCalculateTab3 }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
